import React,{Component} from 'react';
import Template from '../../../components/template/Template';
import Waypoint from 'react-waypoint';
import classNames from 'classnames';
import Lang from './Lang.json';
import './choseService.less';
const prefix = "chose-service";
class ChoseService extends Component{
    state = {
        name:""
    };
    handleWaypointEnter = () =>{
        this.setState({
            name:"fadeInRight"
        })
    };
    handleWaypointLeave = () =>{
        this.setState({
            name:"fadeInRight"
        })
    };
    render(){
        return(
            <Template title={Lang.title} titleColor="#666">
                <div className={classNames(prefix+"-container",'clearfix')}>
                    <div className={prefix+'-left'}>
                    </div>
                    <div className={prefix+"-right"}>
                        <span className={prefix+'-center'}>
                            <Waypoint
                                onEnter={this.handleWaypointEnter}
                                onLeave={this.handleWaypointLeave}
                            />
                            {Lang.reason.map((value,index)=>{
                                return(
                                    <p key={index} className={classNames('animated',this.state.name)} style={{animationDelay: `${index/10}s` }}>{value}</p>
                                )
                            })}
                        </span>
                    </div>
                </div>
            </Template>
        )
    }
};
export default ChoseService;